<template>
	<view class="login">
		<view class="headtop">
			<view class="title">您好, </view>
			<view class="desc clearfix">
				<view class="name fl">欢迎使用</view>
				<image src="../../../static/images/login_logo.png" class="logo fl"></image>
			</view>
		</view>
		<view class="qiehuan">
			<view v-if="activeIndex == 1">
				<image src="../../../static/images/login_fangshi1.png" @click="qiehuan(1)"></image>
				<image src="../../../static/images/login_fangshi2w.png" @click="qiehuan(2)"></image>
				<image src="../../../static/images/login_fangshi3w.png" @click="qiehuan(3)"></image>
			</view>
			<view v-if="activeIndex == 2">
				<image src="../../../static/images/login_fangshi1w.png" @click="qiehuan(1)"></image>
				<image src="../../../static/images/login_fangshi2.png" @click="qiehuan(2)"></image>
				<image src="../../../static/images/login_fangshi3w.png" @click="qiehuan(3)"></image>
			</view>
			<view v-if="activeIndex == 3">
				<image src="../../../static/images/login_fangshi1w.png" @click="qiehuan(1)"></image>
				<image src="../../../static/images/login_fangshi2w.png" @click="qiehuan(2)"></image>
				<image src="../../../static/images/login_fangshi3.png" @click="qiehuan(3)"></image>
			</view>
		</view>
		<view class="form">
			<view class="inp">
				<input type="text" placeholder-style="color:#787B8F" placeholder="请输入账号" v-model="username" />
			</view>
			<view class="inp">
				<input type="password" placeholder-style="color:#787B8F" placeholder="请输入密码" v-model="password" />
			</view>
			<view class="button" @click="login">登录</view>
		</view>
		<view class="footer">
			<image src="../../../static/images/login_wenzi.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';
	
	export default{
		data(){
			return{
				activeIndex: 1,
				username: '',
				password: '',
			}
		},
		onLoad(){
			
		},
		methods: {
			qiehuan(index){
				this.activeIndex = index;
				
				this.username = '';
				this.password = '';
			},
			login(){
				request({
					url: '/api/public/login',
					method: 'POST',
					data: {
						username: this.username,
						password: this.password,
						captcha: '123',
						identity: this.activeIndex
					},
					headers: {}
				})
				.then((res) => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.token);
						
						uni.reLaunch({
							url: '/pages/index/identity'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				})
				.catch((error) => {});
			}
		}
	}
</script>

<style scoped lang="scss">
	.login{
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		overflow: hidden;
		
		.headtop{
			width: 82%;
			margin: 0 auto;
			margin-top: 180rpx;
			
			.title{
				font-size: 48rpx;
				color: #FFFFFF;
				font-weight: 700;
			}
			
			.desc{
				margin-top: 10rpx;
				height: 48rpx;
				line-height: 48rpx;
				
				.name{
					font-size: 48rpx;
					color: #FFFFFF;
					font-weight: 700;
					margin-right: 9rpx;
				}
				
				.logo{
					width: 146rpx;
					height: 48rpx;
					display: flex;
				}
			}
		}
		
		.qiehuan{
			width: 82%;
			margin: 0 auto;
			margin-top: 70rpx;
			
			view{
				height: 84rpx;
				
				image{
					width: 33.3%;
					height: 84rpx;
					float: left;
				}
			}
		}
		
		.form{
			width: 82%;
			margin: 0 auto;
			margin-top: 40rpx;
			
			.inp{
				width: 100%;
				height: 88rpx;
				background: #242831;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				
				input{
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					font-size: 30rpx;
					color: #787B8F;
					padding-left: 30rpx;
					box-sizing: border-box;
				}
			}
			
			.button{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
				color: #806B1A;
				font-size: 36rpx;
				margin-top: 70rpx;
			}
		}
		
		.footer{
			width: 82%;
			margin: 0 auto;
			text-align: center;
			position: fixed;
			left: 9%;
			bottom: 30rpx;
			
			image{
				width: 233rpx;
				height: 75rpx;
			}
		}
	}
</style>